<!--
-->
<template>
  <div class="person">
    <h2>{{ a }}</h2>
    <ul>
      <li v-for="p in list" :key="p.id">
        {{ p.name }} -- {{ p.age }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup name="Person">
  import { withDefaults } from 'vue'
  import { type Persons } from '@/types';

  // 只接收list
  // defineProps(['list'])

  // 接收 list, 同时将 props 保存起来
  // let x = defineProps(['a', 'list'])
  // console.log(x)

  // 接受 list + 限制类型
  // defineProps<{list:Persons}>()

  // 接受 list + 限制类型 + 限制必要性 + 指定默认值
  let x = withDefaults(defineProps<{list?:Persons, a?:string}>(), {
    list: () => [{id: 'ausydgyu01', name: '康师傅·王麻子·特仑苏', age: 19}],
    a: () => "嘻嘻"
  })
  console.log(x)
</script>

<style scoped> 
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>